
{extend name='public/window' /}

{block name="content"}
<style>
    .layui-upload-drag {
        position: relative;
        padding: 10px;
        border: 1px dashed #e2e2e2;
        background-color: #fff;
        text-align: center;
        cursor: pointer;
        color: #999;
        border-radius: 50%;
    }
	.layui-form-label {
	    width: 84px !important;
	}
	.layui-input-block {
	    margin-left: 114px !important;
	}
	.layui-upload-drag {
	    border-radius: 0% !important;
		}
	.layui-input, .layui-textarea {
		 display: initial !important;
		  width: 98%;
		   
	}
</style>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body" style="padding: 15px;">
            <form class="layui-form" action="" lay-filter="form">
                {if isset($info.id)}
                <input type="hidden" name="id" value="{$info.id}">
                {/if}
                <input type="hidden" name="__token__" id="token" value="{:token()}"/>
                <div class="layui-form-item">
                    <label class="layui-form-label">商户</label>
                    <div class="layui-input-inline">
                        <select name="merchant_id" lay-search="" id="merchant_id"  lay-verify="required" lay-filter="merchant_id">
                            <option value="" >请选择</option>
                            {volist name="merchant_list" id="t"}
                            <option value="{$t.id}" >{$t.name} - {$t.code}</option>
                            {/volist}
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">所属部门</label>
                    <div class="layui-input-inline">
                        <select name="department_id" lay-search=""  lay-verify="required">
                            <option value="" >请选择</option>
                            {volist name="department_list" id="t"}
                            <option value="{$t.id}" >{$t.name}</option>
                            {/volist}
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">收费方式</label>
                    <div class="layui-input-inline">
                        <select name="subject_id" lay-search="" id="pay_type" lay-verify="required" lay-filter="pay_type">
                            <option value="" >请选择</option>
                            {volist name="pay_type" id="t"}
                            <option value="{$t.id}" >{$t.name}</option>
                            {/volist}
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">购买数量 *</label>
                    <div class="layui-input-block">
                        <input type="number" name="number"  lay-verify="required" lay-filter="number" autocomplete="off" placeholder="请输入需要购买的数量（度/吨）" class="layui-input" id="number" style="width: 28%;">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">缴费类型</label>
                    <div class="layui-input-inline">
                        <select name="cost_type_id" id="cost_type_list" lay-search=""  lay-verify="required" lay-filter="cost_type_list"  lay-verify="required">
                            <option value="" >请选择</option>
                            {volist name="cost_type_list" id="t"}
                            <option value="{$t.id}" >{$t.cost_name}</option>
                            {/volist}
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">收款明细：</label>
                    <div class="layui-input-block">
                        <table class="layui-hide" id="student_table" lay-filter="student_table"></table>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">手续费比例：</label>
                    <div class="layui-input-block">
                        <input type="number" name="service_charge_rate" id="service_charge_rate" value="" lay-filter="service_charge_rate"  lay-verify="required" autocomplete="off" class="layui-input" >
                        <span>%</span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">手续费：</label>
                    <div class="layui-input-block">
                        <input type="number" name="service_charge" id="service_charge" disabled   lay-verify="required" autocomplete="off" class="layui-input" >
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">需缴金额 *</label>
                    <div class="layui-input-block">
                        <input type="text" name="real_amount" disabled lay-verify="required" autocomplete="off" placeholder="请输入需缴金额" class="layui-input" id="real_amount">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">备注 </label>
                    <div class="layui-input-block">
                        <textarea placeholder="请输入内容"  class="layui-textarea" name="remark"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label ">上传凭证：</label>
                    <div class="layui-input-block">
                        <div class="layui-upload-drag" id="editimg">
                            <img id="show_id" style="width: 260px;margin: 10px 0 10px 0px;height: 150px" src="{if isset($info.id)} {$info.description} {else} __IMG__/default_upload.png {/if}" alt="上传附件" width="120" height="120">
                            <input type="hidden" id="description" name="description" value=""  lay-verType="tips" lay-reqText="图片没有上传">
                        </div>
<!--                        <div style="margin-top:10px;">-->
<!--                            <button type="button" class="layui-btn" id="editimg"  width="120"><i class="layui-icon">&#xe67c;</i>上传附件</button>-->
<!--                        </div>-->
                    </div>
                </div>
                <div class="layui-form-item"  id="interval">
                    <div class="layui-inline">
                        <label class="layui-form-label">开始时间</label>
                        <div class="layui-input-inline">
                            <input type="text" id="b_start_time" name="b_start_time" class="layui-input" placeholder="开始时间">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">结束时间</label>
                        <div class="layui-input-inline">
                            <input type="text" id="b_end_time" name="b_end_time" class="layui-input" placeholder="结束时间">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item layui-layout-admin " style="width: 100%">
                    <div class="layui-input-block">
                        <div class="layui-footer" style="left: 0px;text-align: center;">
                            <button class="layui-btn" lay-submit="" lay-filter="add">{:__('Submit')}</button>
                            <button type="reset" class="layui-btn layui-btn-primary">{:__('Reset')}</button>
                        </div>
                    </div>
                </div>

            </form>
        </div>
    </div>
</div>
<script type="text/html" id="operationTpl">
    <a href="javascript:;" class="layui-btn  layui-btn-danger layui-btn-xs" data-title="删除" lay-event="del"><i class="layui-icon "></i></a>
</script>
<script>
    layui.use(['element', 'form', 'table', 'jquery','lucky','upload','laydate','xmSelect'], function () {
        var element = layui.element;
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate;
        var upload = layui.upload;
        var $ = layui.jquery;
        var lucky=layui.lucky;
        laydate.render({
            elem: '#b_start_time'
            ,type: 'datetime',
			trigger: 'click'
        });
        laydate.render({
            elem: '#b_end_time'
            ,type: 'datetime',
			trigger: 'click'
        });
        var costType = [];
        var student_table = table.render({
            id:'student_table',
            elem:'#student_table',
            cols: [[
                {field: 'cost_name', title: '收费名称'},
                {field: 'type', title: '收费类型', templet: function (item) {
                        var type = item.type
                        if (type == 1) {
                            return '押金'
                        } else if (type == 2) {
                            return '费用'
                        } else if (type == 3) {
                            return '证件'
                        } else {
                            return '未知类型'
                        }
                  }},
                {title: '单价', field: 'unitprice'},
                {title: '税率', field: 'tax_rate'},
                {title: '税率金额', field: 'tax_money'},
                {title: '收入金额', field: 'money'},
                {title: '总金额', field: 'z_money'},
            ]],
            data: costType
        });
        $("#number").on("input",function(e){
            console.log('监听中.....')
            student_table.reload({data:[]});
            var number = e.delegateTarget.value;
            var merchant_id = $("#merchant_id").val();
            if (!merchant_id){
                return false;
            }
            var pay_type = $("#pay_type").val();
            if (!pay_type){
                return false;
            }
            var cost_type = $("#cost_type_list").val();
            if (!cost_type){
                return false;
            }
            var service_charge_rate = $("#service_charge_rate").val();
            service_charge_rate = parseFloat(service_charge_rate/100)
            var datas = {} ;
            datas.merchant_id = merchant_id ;   // 商户ID
            datas.number      = number ;   //  购买数量
            datas.cost_type   = cost_type ;   // 缴费类型
            datas.service_charge_rate   =service_charge_rate ;  //  手续费比例
            console.log('datas',datas)
            costtype(datas) ;
            return false;
        });
        $("#service_charge_rate").on("input",function(e){
            student_table.reload({data:[]});
            var service_charge_rate = e.delegateTarget.value;
            service_charge_rate = parseFloat(service_charge_rate/100)
            var merchant_id = $("#merchant_id").val();
            if (!merchant_id){
                return false;
            }
            var pay_type = $("#pay_type").val();
            if (!pay_type){
                return false;
            }
            var  number = $("#number").val();
            if (!number){
                return false;
            }
            var cost_type = $("#cost_type_list").val();
            if (!cost_type){
                return false;
            }
            var datas = {} ;
            datas.merchant_id = merchant_id ;   // 商户ID
            datas.number      = number ;   //  购买数量
            datas.cost_type   = cost_type ;   // 缴费类型
            datas.service_charge_rate   =service_charge_rate ;  //  手续费比例
            console.log('datas',datas)
            costtype(datas) ;
            return false;
        });

        // cost_type_list
        form.on('select(cost_type_list)', function(data){
            student_table.reload({data:[]});
            if (!data.value){
                return false
            }
            var merchant_id = $("#merchant_id").val();
            if (!merchant_id){
                layer.msg("请先选择商户",{icon:15,time:1000,shade:0.3});
                return false;
            }
            //
            var pay_type = $("#pay_type").val();
            if (!pay_type){
                layer.msg("请先选择支付方式",{icon:15,time:1000,shade:0.3});
                return false;
            }
            var service_charge_rate = $("#service_charge_rate").val();
            service_charge_rate = service_charge_rate/100
            var  number = $("#number").val();
            if (!number){
                layer.msg("请先填写购买数量",{icon:15,time:1000,shade:0.3});
                return false;
            }
            var datas = {} ;
            datas.merchant_id = merchant_id ;   // 商户ID
            datas.number      = number ;   //  购买数量
            datas.cost_type   = data.value ;   // 缴费类型
            datas.service_charge_rate   =service_charge_rate ;  //  手续费比例
            console.log('datas',datas)
            costtype(datas) ;
            return false;
        });

        form.on('select(merchant_id)', function(data){
            student_table.reload({data:[]});
            if (!data.value){
                return false
            }
            //
            var pay_type = $("#pay_type").val();
            if (!pay_type){
                return false;
            }
            var service_charge_rate = $("#service_charge_rate").val();
            service_charge_rate = service_charge_rate/100
            var  number = $("#number").val();
            if (!number){
                return false;
            }
            var cost_type = $("#cost_type_list").val();
            if (!cost_type){
                return false;
            }
            var datas = {} ;
            datas.merchant_id = data.value ;   // 商户ID
            datas.number      = number ;   //  购买数量
            datas.cost_type   = cost_type;   // 缴费类型
            datas.service_charge_rate   =service_charge_rate ;  //  手续费比例
            costtype(datas) ;
            console.log('datas',datas)
            return false;
        });

        function costtype(datas){
            $.ajax({
                url:"{:url('getCostType')}",
                type:"post",
                data: datas,
                dataType:"json",
                success:function(data){

                    if(data.code == 1){
                        layer.msg(data.msg,{icon:15,time:1000,shade:0.3});
                    }else{
                        var param = data.data
                        $('#service_charge').val(param.service_charge_money)
                        $("#real_amount").val(param.z_money);
                        student_table.reload({data:param.data});
                    }
                    // return data.data

                }
            });
        }

        // cost_type_list
        form.on('select(pay_type)', function(data){
            student_table.reload({data:[]});
            var  number = $("#number").val();
            $.ajax({
                url:"{:url('ServiceCharge')}",
                type:"post",
                data: {'id':data.value},
                dataType:"json",
                success:function(data){
                    var param = data.data
                    $("#service_charge_rate").val(param.service_charge);
                    student_table.reload({data:[]});
                    var merchant_id = $("#merchant_id").val();
                    if (!merchant_id){
                        return false;
                    }
                    var service_charge_rate = param.service_charge/100
                    var  number = $("#number").val();
                    if (!number){
                        return false;
                    }
                    var cost_type = $("#cost_type_list").val();
                    if (!cost_type){
                        return false;
                    }
                    var datas = {} ;
                    datas.merchant_id = merchant_id ;   // 商户ID
                    datas.number      = number ;   //  购买数量
                    datas.cost_type   = cost_type;   // 缴费类型
                    datas.service_charge_rate   = service_charge_rate ;  //  手续费比例
                    costtype(datas) ;
                    console.log('datas',datas)
                }
            });
            return false;
        });


        upload.render({
            elem:'#editimg'
            ,url: "{:url('common/UpImg')}" //图片上传地址
            ,accept: 'images' //
            ,acceptMime: 'image/*'
            ,size: 1024*12
            ,before:function (res) {
                loading = layer.load(2, {
                    shade: [0.2, '#000'] //0.2透明度的白色背景
                });
            }
            ,done: function(data){
                layer.close(loading);
                if (data.code==1){
                    $("#show_id").attr("src",data.data.thumb_path);
                    $("#description").val(data.data.thumb_path);
                    layer.msg('图片上传成功', {icon: 5, time: 1000});
                } else {
                    layer.msg(data.msg, {icon: 5, time: 1000});
                }
            }
            ,error:function (red) {
                layer.close(loading);
                layer.msg("网络错误", {icon: 5, time: 1500});
            }
        });

        //表单赋值
        var info = {:json_encode($info)};
        form.val("form",info);
        form.on('submit(add)', function (data) {
            var datas  = layui.table.cache["student_table"]
            data.field.type = 2 // 添加type
            data.field.is_admin_create = 1 // 添加type
            data.field.pay_status = 1 // 支付状态
            data.field.datas = datas // 添加type
            lucky.FormSubmit("{:url('adminAdd')}",data.field,true);
            return false;
        });
    })
</script>

{/block}

